<template>
  <div class="graph">
    <div id="graph-main" style="width: auto; height: 600px"></div>
  </div>
</template>
  
<script setup>
import { onMounted, onUpdated } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { apiGraph_1, apiGraph_2 } from "../apis/apis.js";
import { raw_data } from "../tableData/data.js";
import allParams from "../utils/sendParams.js";
import * as echarts from "echarts/core";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  ToolboxComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { ElLoading } from 'element-plus'

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent,
  ToolboxComponent,
]);

const router = useRouter();
const route = useRoute();

const id = ref(parseInt(route.params.gid));
const raw_data_ref = ref(raw_data);
const sendData = ref(allParams(raw_data_ref.value));

var myChart = {};
var option = {
  title: {
    text: "",
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["分年度投资", "平均电价", "年等效利用小时数"],
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {
        name: "",
      },
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["-10", "-8", "-6", "-4", "-2", "0", "2", "4", "6", "8", "10"],
    name: "变化幅度(%)",
    nameLocation: "center",
    nameGap: 25
  },
  yAxis: {
    type: "value",
    name: "全投资财务内部收益率（所得税前）（%）",
    nameLocation: "center",
    nameGap: 25
  },
  series: [],
};

const toSeries = (s, id) => {
  var baseLine1 = [
    raw_data_ref.value.info.data.hyjzsylq.value,
    raw_data_ref.value.info.data.hyjzsylq.value,
    raw_data_ref.value.info.data.hyjzsylq.value,
    raw_data_ref.value.info.data.hyjzsylq.value,
    raw_data_ref.value.info.data.hyjzsylq.value,
    raw_data_ref.value.info.data.hyjzsylq.value,
    raw_data_ref.value.info.data.hyjzsylq.value,
    raw_data_ref.value.info.data.hyjzsylq.value,
    raw_data_ref.value.info.data.hyjzsylq.value,
    raw_data_ref.value.info.data.hyjzsylq.value,
    raw_data_ref.value.info.data.hyjzsylq.value,
  ];
  var baseLine2 = [
    raw_data_ref.value.info.data.zbjjzsyl.value,
    raw_data_ref.value.info.data.zbjjzsyl.value,
    raw_data_ref.value.info.data.zbjjzsyl.value,
    raw_data_ref.value.info.data.zbjjzsyl.value,
    raw_data_ref.value.info.data.zbjjzsyl.value,
    raw_data_ref.value.info.data.zbjjzsyl.value,
    raw_data_ref.value.info.data.zbjjzsyl.value,
    raw_data_ref.value.info.data.zbjjzsyl.value,
    raw_data_ref.value.info.data.zbjjzsyl.value,
    raw_data_ref.value.info.data.zbjjzsyl.value,
    raw_data_ref.value.info.data.zbjjzsyl.value,
  ];
  var res = [
    {
      name: "",
      type: "line",
      data: id == 1 ? baseLine1 : baseLine2,

      lineStyle: {
        color: "#909399",
        width: 1,
        type: "dashed",
      },
      markLine: {
        data: [
          {
            xAxis: 0,
          },
        ],
      },
    },
  ];
  for (let i = 0; i < s.length; i++) {
    res.push({
      name: s[i].param,
      type: "line",
      data: s[i].res,
    });
  }
  console.log("res = ", res);
  return res;
};

const getGTable = (id) => {
  const loading = ElLoading.service({target : document.querySelector('.graph'), fullscreen: false })
  if (id == 1) {
    apiGraph_1(sendData.value)
      .then((res) => {
        console.log("OK ", res);
        if (res.code === 200) {
          option.series = toSeries(res.obj, 1);
          option.title.text = "全投资财务内部收益率(所得税前)分析图";
          option.yAxis.name = "全投资财务内部收益率(所得税前)(%)"
          myChart = echarts.getInstanceByDom(
            document.getElementById("graph-main")
          );
          myChart.setOption(option);
          loading.close()
        }
      })
      .catch((res) => {
        console.log("ERROR ", res);
        ElMessage({
          message: "参数计算错误",
          grouping: true,
          type: "error",
        });
      });
  }
  if (id == 2) {
    apiGraph_2(sendData.value)
      .then((res) => {
        console.log("OK ", res);
        if (res.code === 200) {
          option.series = toSeries(res.obj, 2);
          option.title.text = "资本金财务内部收益率分析图";
          option.yAxis.name = "资本金财务内部收益率(%)"
          myChart = echarts.getInstanceByDom(
            document.getElementById("graph-main")
          );
          myChart.setOption(option);
          loading.close()
        }
      })
      .catch((res) => {
        console.log("ERROR ", res);
        ElMessage({
          message: "参数计算错误",
          grouping: true,
          type: "error",
        });
      });
  }
};

onMounted(() => {
  console.log(" Graph onMounted : ", route.params);
  echarts.init(document.getElementById("graph-main")).dispose();
  myChart = echarts.init(document.getElementById("graph-main"));
  getGTable(parseInt(route.params.gid));
});
</script>
  
<style>
.graph {
  margin: 20px;
}
</style>